<template>
  <el-card class="ik-chart-card">
    <div slot="header" class="clearfix">
      <span class="ik-chart-card-title">{{ title }}</span>
      <p class="table_title_img" />
      <span class="logo" />
    </div>
    <div
      :id="code"
      ref="chartDom"
      class="ik-chart-card-chart"
      :style="'height: ' + height + ''"
      @click="changeSize"
    />
  </el-card>
</template>

<script>
import { dimensionExtraction, initSingleSeries } from "@/views/frame/board/components/ik/echarts/dataProcess"
import theme from "@/views/frame/board/components/ik/echarts/theme/ik.json"
import * as echarts from "echarts"

export default {
  name: "IkBarStackChart",
  props: {
    title: {
      type: String,
      default: "标题"
    },
    code: {
      type: String,
      default: "bar.ring"
    },
    data: {
      type: Array,
      default: function() {
        return [
          { type: "类型1", dep: "部门1", value: "30" },
          { type: "类型1", dep: "部门2", value: "30" },
          { type: "类型1", dep: "部门1", value: "30" },
          { type: "类型4", dep: "部门2", value: "30" },
          { type: "类型4", dep: "部门1", value: "35" },
          { type: "类型4", dep: "部门2", value: "37" },
          { type: "类型6", dep: "部门1", value: "30" },
          { type: "类型6", dep: "部门2", value: "35" },
          { type: "类型6", dep: "部门1", value: "39" },
          { type: "类型7", dep: "部门1", value: "39" }
        ]
      }
    },
    // 数据分析维度 - 第一数据维度
    dataDimensionField: {
      type: String,
      default: "value"
    },
    dataDimensionMin: {
      type: String,
      default: ""
    },
    dataDimensionMax: {
      type: String,
      default: ""
    },
    dataDimensionInterval: {
      type: String,
      default: ""
    },
    dataDimensionUom: {
      type: String,
      default: ""
    },
    gridType: {
      type: String,
      default: "summary"
    },
    // 数据分析维度 - 第一分析维度 - 横坐标
    firstAnalysisDimensionField: {
      type: String,
      default: "type"
    },
    firstAnalysisDimension: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 数据分析维度 - 第二分析维度 - 图例
    secondAnalysisDimensionField: {
      type: String,
      default: ""
    },
    secondAnalysisDimension: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 样式
    height: {
      type: String,
      default: "100%"
    }
  },
  data() {
    return {
      chartFirstAnalysisDimension: [],
      chartSecondAnalysisDimension: [],
      chartSeries: [],
      chartDom: null,
      chart: null
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    changeSize() {
      // 修改 echart 大小
      this.chart.resize()
    },
    init() {
      const $this = this
      // 初始化 chart 样式
      // 基于准备好的dom，初始化echarts实例
      const dom = document.getElementById($this.code)
      echarts.registerTheme("ik", theme)
      this.chart = echarts.init(dom, "ik")
      // 如果第一维度不存在，通过字段抽取
      if ($this.firstAnalysisDimension.length === 0) {
        // 第一维度必需
        if ($this.firstAnalysisDimensionField === "") {
          console.log("First Analysis Dimension Field Is Null")
        }
        $this.chartFirstAnalysisDimension = dimensionExtraction(
          $this.data,
          $this.firstAnalysisDimensionField
        )
      } else {
        $this.chartFirstAnalysisDimension = $this.firstAnalysisDimension
      }
      // 如果第二维度不存在，通过字段抽取
      if ($this.secondAnalysisDimension.length === 0) {
        // 第二维度非必需，填写则抽取
        if ($this.secondAnalysisDimensionField !== "") {
          $this.chartSecondAnalysisDimension = dimensionExtraction(
            $this.data,
            $this.secondAnalysisDimensionField
          )
        }
      } else {
        $this.chartSecondAnalysisDimension = $this.secondAnalysisDimension
      }

      // 生成 series
      const series = initSingleSeries(
        $this.data,
        $this.chartFirstAnalysisDimension,
        $this.chartSecondAnalysisDimension,
        $this.firstAnalysisDimensionField,
        $this.secondAnalysisDimensionField,
        $this.dataDimensionField,
        $this.gridType
      )

      // 生成数据轴数据
      const axis = {}
      if ($this.dataDimensionMin !== "") {
        axis["min"] = Number($this.dataDimensionMin)
      }
      if ($this.dataDimensionMax !== "") {
        axis["max"] = Number($this.dataDimensionMax)
      }
      if ($this.dataDimensionInterval !== "") {
        axis["interval"] = Number($this.dataDimensionInterval)
      }
      if ($this.dataDimensionUom !== "") {
        console.log()
      }

      //
      const chartSeries = []
      for (const key in series) {
        chartSeries.push({
          name: key,
          type: "bar",
          showBackground: true,
          data: series[key],
          stack: "data"
        })
      }
      // 绘制图表
      this.chart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          data: $this.chartSecondAnalysisDimension
        },
        yAxis: {
          type: "category",
          data: $this.chartFirstAnalysisDimension
        },
        xAxis: axis,
        series: chartSeries
      })
      // 重设大小
      this.chart.resize()
    }
  }
}
</script>

<style lang="scss" scoped>
.ik-chart-card {
  width: 100%;
  height: 100%;
  position: relative;
  ::v-deep .el-card__header {
    padding: 10px;
    position: absolute;
    width: 100%;
    // height: 20%!important;
    .clearfix {
      height: 20px;
      line-height: 20px;
    }
  }
  ::v-deep .el-card__body {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: calc(100% - 41px) !important;
    padding: 0px;
    padding-left: 5px;
    canvas {
      width: 100% !important;
      height: 100% !important;
    }
  }
}
</style>
